<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <!-- 下拉选项是动态渲染出来的，而且这里添加multiple表示下拉多选，那么city对应的值将会是数组的形式 -->
  <h2>下拉多选框</h2>
  <div id="multiple-select">
    <select v-model="selected" multiple>
      <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
    <span>你选中的城市: {{ selected }}</span>
  </div>
</div>
<script>
  new Vue({
    el: '#multiple-select',
    data: {
      options: [
        { text: '北京', value: '北京' },
        { text: '上海', value: '上海' },
        { text: '广州', value: '广州' },
        { text: '深圳', value: '深圳' },
        { text: '杭州', value: '杭州' }
      ],
      selected: []
    }
  });
</script>
</body>
</html>